<template>
	<sw-common-frame :count="dataCount" :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
			<!-- <el-button size="small" type="warning" icon="el-icon-download" plain @click="handleExportData()">导出</el-button> -->
			<el-button size="small" type="info" icon="el-icon-upload2" plain @click="handleImportDialog()">导入</el-button>
			<template v-if="checkedIds.length > 0">
				<el-button size="small" type="danger" icon="el-icon-delete" plain @click="handleBatchDeleteData()">删除</el-button>
			</template>
		</template>
		<template slot="query">
			<el-form size="small" inline>
				<el-form-item>
					<el-input v-model="queryData.title" clearable placeholder="请输入试题名称" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="queryData.bankId" clearable placeholder="所属题库" style="width: 168px">
						<el-option v-for="(item, index) in topicLibraryData" :key="index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="queryData.status" clearable placeholder="试题状态" style="width: 102px">
						<el-option label="正常" value="1"></el-option>
						<el-option label="禁用" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="queryData.type" clearable placeholder="试题类型" style="width: 102px">
						<el-option v-for="(item, index) in subjectTypes" :key="index" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="queryData.difficulty" clearable placeholder="试题难度" style="width: 102px">
						<el-option v-for="(item, index) in subjectDifficulty" :key="index" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryTableData()">查询</el-button>
				</el-form-item>
			</el-form>
		</template>
		<el-table slot="table" :data="tableData" height="100%" stripe @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="42" align="center"></el-table-column>
			<el-table-column label="试题名称" prop="title" min-width="311" :formatter="returnSubjectTitle" show-overflow-tooltip />
			<el-table-column label="题库名称" prop="testQuestionBank.name" min-width="150" show-overflow-tooltip />
			<el-table-column label="类型" width="80" align="center" :formatter="returnSubjectTypeName" />
			<el-table-column label="状态" width="80" align="center">
				<template slot-scope="{ row }">
					<el-tag size="medium" type="success" v-if="row.status === '1'">正常</el-tag>
					<el-tag size="medium" type="warning" v-if="row.status === '2'">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="难度" width="80" align="center" :formatter="returnSubjectDifficulty" />
			<el-table-column label="创建时间" prop="createTime" min-width="160"></el-table-column>
			<el-table-column label="操作" width="186">
				<el-button-group slot-scope="{ row }">
					<el-button size="mini" type="info" @click="handleOpenDetail(row.id)">详情</el-button>
					<el-button size="mini" type="warning" @click="handleOpenDialog(row.id)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDeleteData(row)">删除</el-button>
				</el-button-group>
			</el-table-column>
		</el-table>
		<template slot="page">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
		</template>
		<form-dialog v-model="formDialog" :list="topicLibraryData" :data-id="dataId" @refresh="queryTableData()"></form-dialog>
		<import-dialog v-model="importDialog" :list="topicLibraryData" @refresh="queryTableData()"></import-dialog>
		<subject-detail v-model="detailDialog" :data-id="subjectId"></subject-detail>
	</sw-common-frame>
</template>

<script>
import formDialog from './form';
import importDialog from './import';
import subjectDetail from './detail';
import listMixins from '@/mixins/listMixins';
import { getTopicLibraryList } from '@/api/exam/testQuestionBank';
import { subjectType, subjectDifficulty } from '@/utils/subjectData';
import { getQuestionsList, deleteQuestions, batchDeleteQuestions } from '@/api/exam/testSubjects';
const baseUrl = !window.baseUrl ? process.env.VUE_APP_BASEURL : window.baseUrl;
export default {
	mixins: [listMixins],
	components: { formDialog, subjectDetail, importDialog },
	data() {
		return {
			subjectId: '',
			pageName: '题库',
			importDialog: false,
			detailDialog: false,
			topicLibraryData: [],
			checkedIds: []
		};
	},
	computed: {
		listFunction() {
			return eval(getQuestionsList);
		},
		deleteFunction() {
			return eval(deleteQuestions);
		},
		subjectTypes() {
			return subjectType;
		},
		subjectDifficulty() {
			return subjectDifficulty;
		}
	},
	mounted() {
		this.getTopicLibraryData();
	},
	methods: {
		//获取题库数据
		async getTopicLibraryData() {
			let params = { page: 1, limit: 999 };
			let result = await getTopicLibraryList(params).then((res) => res.data);
			if (result.code === '0') {
				this.topicLibraryData = result.data || [];
			}
		},

		//返回试题名称
		returnSubjectTitle(data) {
			return this.$cleanHtmlTag(data.title);
		},

		//返回试题类型名称
		returnSubjectTypeName(data) {
			let info = subjectType.find((n) => n.value === data.type);
			return !info ? '未知' : info.label;
		},

		//返回试题难度名称
		returnSubjectDifficulty(data) {
			let info = subjectDifficulty.find((n) => n.value === data.difficulty);
			return !info ? '未知' : info.label;
		},

		//选中数据
		handleSelectionChange(selection) {
			this.checkedIds = selection.map((n) => n.id);
		},

		//打开题库详情
		handleOpenDetail(id) {
			this.subjectId = id;
			this.detailDialog = true;
		},

		//打开导入弹窗
		handleImportDialog() {
			this.importDialog = true;
		},

		//批量删除数据
		handleBatchDeleteData() {
			let that = this;
			that.$confirm('确定要删除吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						batchDeleteQuestions({ ids: that.checkedIds }).then((res) => {
							let result = res.data;
							instance.confirmButtonLoading = false;
							if (result.code === '0') {
								that.$message.success('删除试题成功');
								that.queryTableData();
								done();
							}
						});
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//导出试题数据
		handleExportData() {
			window.location.href = `${baseUrl}/testSubjects/export`;
		}
	}
};
</script>

<style lang="scss" scoped></style>
